
import React, { useEffect, memo } from 'react';
import { useHistory } from 'react-router';
import { connect } from 'react-redux';
import { userCollect, delCollectAction } from '../../store/actions';
import style from './index.module.scss';
import Header from '../../components/Header';

import { SwipeAction, List } from 'antd-mobile';
const WrapHeader = memo(Header);


interface Iprops {
    getCollect: (typeId: string) => void,
    delCollect: (typeId: string, valueId: string) => void,
    collectList: Array<any>
}
const Collect: React.FC<Iprops> = props => {
    const history = useHistory();
    useEffect(() => {
        props.getCollect('0')
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const delFunc = (typeId: string, valueId: string) => {
        props.delCollect(typeId, valueId);
        props.getCollect('0')
    }
    return <div className={style.collect}>
        <WrapHeader title="easyLikeGoods" />
        <div className={style.content}>
            {
                props.collectList.map((item) => {
                    return <List key={item.id}>
                        <SwipeAction
                            style={{ backgroundColor: 'gray' }}
                            autoClose
                            right={[
                                {
                                    text: '删除',
                                    onPress: () => delFunc(item.type_id, item.value_id),
                                    style: { backgroundColor: '#F4333C', color: 'white', width: "120px" },
                                },
                            ]}
                        >
                            <List.Item
                            >
                                <div
                                    className={style.item}
                                    onClick={() => history.push(`/addcart/${item.value_id}`)}
                                >
                                    <div className={style.left}>
                                        <img src={item.list_pic_url} alt="" />
                                    </div>
                                    <div className={style.right}>
                                        <h3>{item.name}</h3>
                                        <p>{item.goods_brief}</p>
                                        <p><b>￥ {item.retail_price}</b></p>
                                    </div>
                                </div>
                            </List.Item>
                        </SwipeAction>
                    </List>
                })
            }
        </div>
    </div>
}
const mapStateToProps = (state: any) => {
    return state.user
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        getCollect: (typeId: string) => {
            dispatch(userCollect(typeId));
        },
        delCollect: (typeId: string, valueId: string) => {
            dispatch(delCollectAction(typeId, valueId));
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Collect)
